<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="工资/结算录入-支"></my-header>

		<u-form :model="form" ref="uForm">
			<view class="main-body">
				<view class="fon-siz-14 fon-wei-bol">基础信息</view>
				<!--所属账本-->
				<view>
					<u-form-item :required="true" label-width="70px" label="所属账本：" prop="accountBookName"
						:border-bottom="false">
						<u-input v-model="form.accountBookName" placeholder="请选择账本" placeholder-style="font-size:11px;"
							type="select" :select-open="zhangbenShow" :border="true" @click="zhangbenShow = true" />
						<u-select v-model="zhangbenShow" mode="mutil-column-auto" :list="zhangbenList"
							@confirm="zhangbenCallback"></u-select>
					</u-form-item>
				</view>
				<!--选择员工-->
				<view>
					<u-form-item :required="true" label-width="70px" label="员工姓名：" prop="superiorVal"
						:border-bottom="false">
						<u-input v-model="form.superiorVal" placeholder="请选择员工" placeholder-style="font-size:11px;"
							type="select" :select-open="shangjiShow" :border="true" @click="shangjiShow = true" />
						<u-select v-model="shangjiShow" mode="mutil-column-auto" :list="shangjiList"
							@confirm="actionSheetCallback"></u-select>
					</u-form-item>
				</view>
				<!--所属角色-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item :required="true" label-width="70px" label="所属角色：" :border-bottom="false">
							<u-input :disabled="true" placeholder=" " v-model="form.roleVal" />
						</u-form-item>
					</view>
				</view>
				<!--出勤天数-->
				<view class="dis_flex ali-ite">
					<view class="dis_flex ali-ite">
						<u-form-item :required="true" label-width="70px" label="出勤天数：" prop="attendance"
							:border-bottom="false">
							<u-input input-align="center" height="20" v-model="form.attendance" placeholder=" "
								:custom-style="chuqinStyle" :clearable="false" />
						</u-form-item>
						<view class="mar-lef-5">天</view>
					</view>
				</view>
				<!--工资月份-->
				<view class="dis_flex ali-ite">
					<view class="dis_flex ali-ite">
						<u-form-item :required="true" label-width="70px" label="工资月份：" prop="month"
							:border-bottom="false">
							<u-input input-align="center" height="20" v-model="form.month" placeholder=" "
								:custom-style="chuqinStyle" :clearable="false" />
						</u-form-item>
						<view class="mar-lef-5">月</view>
					</view>
				</view>
			</view>
			<view class="main-body mar-top-2">
				<view class="fon-siz-14 fon-wei-bol">工资部分（单位：元）</view>
				<!--基础工资-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item :required="true" label-width="70px" label="基础工资：" prop="basePay">
							<u-input placeholder=" " v-model="form.basePay" />
						</u-form-item>
					</view>
				</view>
				<!--绩效工资-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item label-width="70px" label="绩效工资：" prop="name">
							<u-input placeholder=" " v-model="form.achievements" />
						</u-form-item>
					</view>
				</view>
				<!--业绩提成-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item label-width="70px" label="业绩提成：" prop="name">
							<u-input placeholder=" " v-model="form.commission" />
						</u-form-item>
					</view>
				</view>
				<!--全勤奖励-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item label-width="70px" label="全勤奖励：" prop="name">
							<u-input placeholder=" " v-model="form.full_attendance" />
						</u-form-item>
					</view>
				</view>
				<!--工作补助-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item label-width="70px" label="工作补助：" prop="name">
							<u-input placeholder=" " v-model="form.workSubsidy" />
						</u-form-item>
					</view>
				</view>
				<!--岗位补助-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item label-width="70px" label="岗位补助：" prop="name">
							<u-input placeholder=" " v-model="form.postSubsidy" />
						</u-form-item>
					</view>
				</view>
				<!--技能补助-->
				<view class="dis_flex jus-con ali-ite">
					<view>
						<u-form-item label-width="70px" label="技能补助：" prop="name">
							<u-input placeholder=" " v-model="form.skillSubsidy" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
					<view>
						<u-form-item label-width="70px" label="说明：" prop="name">
							<u-input placeholder=" " v-model="form.skillSubsidy_explain" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
				</view>
				<!--其它支付-->
				<view class="dis_flex jus-con ali-ite">
					<view>
						<u-form-item label-width="70px" label="其它支付：" prop="name">
							<u-input placeholder=" " v-model="form.otherPay" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
					<view>
						<u-form-item label-width="70px" label="说明：" prop="name">
							<u-input placeholder=" " v-model="form.otherPay_explain" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
				</view>

				<view class="address" style="margin:30rpx 0 0rpx 0;">
					<button @click="cancel()" type="warn">取消</button>
					<button @click="submit()" style="background:#0051BA" type="primary">提交</button>
				</view>
				<view style="margin-top:20px;">
					<text style="color:red;">温馨提示：红色星为必填项，</text>
					<text style="color:#0051BA;">蓝色星为选填项</text>
				</view>
			</view>
		</u-form>


	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'), // 获取用户信息
				rules: {
					// 员工姓名选择
					superiorVal: [{
						required: true,
						message: '请选择员工！',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// 出勤天数
					attendance: [{
						required: true,
						message: '请填写出勤天数！',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// 工资月份
					month: [{
						required: true,
						message: '请填写工资月份！',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// 基础工资
					basePay: [{
						required: true,
						message: '请填写基本工资！',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// 基础工资
					accountBookName: [{
						required: true,
						message: '请选择账本！',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				form: {
					accountBook: '', // 所属账本
					accountBookName: '', // 过滤用
					superiorVal: '',
					user_id: '',
					attendance: '',
					month: '',
					roleVal: '',
					basePay: '',
					achievements: '',
					commission: '',
					full_attendance: '',
					workSubsidy: '',
					postSubsidy: '',
					skillSubsidy: '',
					otherPay: '',
					skillSubsidy_explain: '',
					otherPay_explain: '',
				},
				leftIcon: {
					fontSize: '7rpx',
					color: '#0051BA'
				},
				zhangbenShow: false,
				zhangbenList: [],
				shangjiShow: false,
				shangjiList: [],
				background: {
					backgroundColor: ' ',
				},
				jinengStyle: {
					width: '70px',
				},
				chuqinStyle: {
					width: '50px',
					border: '1px solid #ccc',
					borderRadius: '8px',
					height: '30px',
				},
				chuqin: '22',
				yuefen: '11',
				mode: 'range',
			}
		},
		methods: {
			// 提交事件
			submit() {
				this.$refs.uForm.validate(valid => {
					console.log(valid)
					if (valid) {
						this.submitTj();
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 所属账本事件
			zhangbenCallback(e) {
				this.form.accountBookName = e[0].label
				this.form.accountBook = e[0].value
				console.log(e)
			},
			// 选择员工事件
			actionSheetCallback(e) {
				this.form.user_id = e[2].value
				this.form.roleVal = e[1].label
				this.form.superiorVal = e[0].label + ' - ' + e[1].label + ' - ' + e[2].label
				console.log(e)
			},
			// 表格提交
			async submitTj() {
				let data = {
					lru_id: this.userInfo.id,
					u_id: this.form.user_id,
					accountBook: this.form.accountBook,
					attendance: this.form.attendance,
					month: this.form.month,
					basePay: this.form.basePay,
					achievements: this.form.achievements,
					commission: this.form.commission,
					full_attendance: this.form.full_attendance,
					workSubsidy: this.form.workSubsidy,
					postSubsidy: this.form.postSubsidy,
					skillSubsidy: this.form.skillSubsidy,
					otherPay: this.form.otherPay,
					skillSubsidy_explain: this.form.skillSubsidy_explain,
					otherPay_explain: this.form.otherPay_explain,
				}
				let res = await this.asyncPublic('/finance/financeAddWagesAdd', data)
				if (res.code == 200) {
					// 禁止重复点击
					wx.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
						success: function() {
							setTimeout(function() {
								wx.navigateTo({
									url: '/pages/finance/index/finance-home',
								})
							}, 2000);
						}
					});
				} else {
					wx.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
					});
				}
				console.log(res);
				this.load_close();
			},
			// 首次查询事件
			async onSelect() {
				let res = await this.asyncPublic('/finance/financeAddWagesOnSelect', 1)
				this.shangjiList = res.data.shangji
				this.zhangbenList = res.data.account
				console.log(res);
				this.load_close();
			},
		},
		// 下拉改变头部背景色
		onPageScroll(res) {
			if (res.scrollTop > 0) {
				this.background.backgroundColor = '#005687';
			} else {
				this.background.backgroundColor = ' ';
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.load();
			this.onSelect();
		},
		components: {
			myHeader,
		}
	}
</script>

<style>
	.u-form-item {
		padding: 5px !important;
	}

	.u-icon__icon {
		font-size: 12px !important;
	}

	.u-input--border {
		height: 60rpx !important;
	}

	.u-input__input {
		font-size: 22rpx !important;
		min-height: 60rpx !important;
	}

	.u-form-item {
		padding: 0px !important;
	}

	.address-xx {
		margin-top: 20rpx;
		border: 1rpx solid #ccc;
		width: 610rpx;
		height: 150rpx;
		padding-left: 20rpx;
	}

	.address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address button {
		font-size: 13px;
		width: 140px;
		border-radius: 20px;
	}

	.address h2 {
		width: 180rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		padding: 10rpx 0 10rpx 0;
	}

	.main-body {
		padding: 10px 20px 10px 20px;
		border-radius: 8px;
		border: 1px solid #ccc;
		background: #fff;
	}

	.main {
		padding: 20px;
		min-height: 100vh;
		background-image: linear-gradient(#005687, #E4E4E5);
	}
</style>
